<template>
    <div class="detail">
      <detail-nav-bar class="detail-nav" @titleClick="titleClick" ref="nav"/>
      <scroll class="content" ref="scroll" :probe-type="3" @scroll="contentScroll">
        <detail-swiper :top-images="topImages"/>
        <detail-base-info :goods="goods"/>
        <Detail-Shop-Info :shop="shop"/>
        <Detail-Goods-Info :detail-info="detailInfo" @imageLoad="imageLoad"/>
        <Detail-Param-Info ref="params" :param-info="paramInfo"/>
        <Detail-Comment-Info ref="comment" :comment-info="commentInfo"/>
        <GoodsList ref="recommend":goods="recommends"/>
      </scroll>
      <detail-bottom-bar @addCart="addToCart"/>
      <back-top @click.native="backclick" v-show="isShowBackTop"/>
      <!--<toast :message="message" :show="show"/>-->
    </div>
</template>

<script>
import DetailNavBar from "@/views/detail/childComps/DetailNavBar"
import DetailSwiper from "@/views/detail/childComps/DetailSwiper";
import DetailBaseInfo from "@/views/detail/childComps/DetailBaseInfo";
import DetailShopInfo from "@/views/detail/childComps/DetailShopInfo";
import DetailGoodsInfo from "@/views/detail/childComps/DetailGoodsInfo";
import DetailParamInfo from "@/views/detail/childComps/DetailParamInfo";
import DetailCommentInfo from "@/views/detail/childComps/DetailCommentInfo";
import GoodsList from "@/components/content/goods/GoodsList";
//import Toast from 'components/common/toast/Toast';
import DetailBottomBar from "@/views/detail/childComps/DetailBottomBar";

import Scroll from "@/components/common/scroll/Scroll";
import BackTop from "@/components/content/backTop/BackTop";


import {getDetail,Goods,Shop,GoodsParam,getRecommend} from "@/network/detail";

import {mapActions} from 'vuex'

export default {
  name: "Detail",
  components:{
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    DetailGoodsInfo,
    DetailParamInfo,
    DetailCommentInfo,
    GoodsList,
    //Toast,
    DetailBottomBar,
    Scroll,
    BackTop
  },
  data(){
    return {
      iid: null,
      topImages: [],
      goods: {},
      shop:{},
      detailInfo:{},
      paramInfo:{},
      commentInfo: {},
      recommends:[],
      themeTopYs:[],
      currentIndex:0,
      isShowBackTop:false,
      //message:'',
     // show:false
    }
  },
  created() {
     this.iid=this.$route.params.iid
     getDetail(this.iid).then(res=>{
       //console.log(res);
       const data=res.result
       this.topImages=res.result.itemInfo.topImages
       this.goods=new Goods(data.itemInfo,data.columns,data.shopInfo.services)
       this.shop=new Shop(data.shopInfo)
       this.detailInfo=data.detailInfo
       this.paramInfo=new GoodsParam(data.itemParams.info,data.itemParams.rule)
       if(data.rate.cRate !==0){
       this.commentInfo=data.rate.list[0]
       }
       this.$nextTick(()=>{
         this.themeTopYs=[]
         this.themeTopYs.push(0)
         this.themeTopYs.push(this.$refs.params.$el.offsetTop-44)
         this.themeTopYs.push(this.$refs.comment.$el.offsetTop-44)
         this.themeTopYs.push(this.$refs.recommend.$el.offsetTop-44)
       })
     })
       getRecommend().then(res=>{
         //console.log(res);
         this.recommends=res.data.list
       })
  },
  methods:{
    ...mapActions(['addCart']),
    imageLoad(){
      this.$refs.scroll.refresh()
    },
    titleClick(index){
      //console.log(index);
      this.$refs.scroll.scrollTo(0,-this.themeTopYs[index],100)
    },
    contentScroll(position) {
      //console.log(position)
      const positionY=-position.y
      let length=this.themeTopYs.length
      for(let i=0;i<length;i++){
        if(this.currentIndex!==i&&((i<length-1&&positionY>this.themeTopYs[parseInt(i)]&&positionY<this.themeTopYs[i+1])
          ||(i === length-1&&positionY>this.themeTopYs[i]))){
           this.currentIndex=i
          console.log(this.currentIndex);
           this.$refs.nav.currentIndex=this.currentIndex
        }
      }
      this.isShowBackTop=-position.y>1000
    },
    backclick(){
      this.$refs.scroll.scrollTo(0,0)
    },
    addToCart() {
       const product ={}
      product.image=this.topImages[0]
      product.title=this.goods.title
      product.desc=this.goods.desc
      product.price=this.goods.newPrice
      product.iid=this.iid
      this.addCart(product).then(res=>{
        //this.show=true;
        //this.message=res;
        //setTimeout(()=>{
          //this.show=false;
        //},1500)
        console.log(this.$toast)
        this.$toast.show(res,2000)
      })
      //this.$store.dispatch('addCart',product).then(res=>{
       // console.log(res)
     // })
    }
  }
}
</script>

<style scoped>
       .detail{
         position:fixed;
         z-index:9;
         background-color:#fff;
         height:100vh;
       }
       .detail-nav{
         position:relative;
         z-index:9;
         background-color:#fff ;
       }
       .content{
         background-color: #fff;
           height:calc(100% - 44px);
       }
</style>
